<template>
    <div class="h-full overflow-hidden flex flex-col">
        <div class="flex-1 overflow-auto pt-[26px] pb-[80px] px-[56px]">
            <div class="flex flex-row items-center gap-[10px]">
                <div class="bg-theme w-1 h-5 rounded-xs"></div>
                <span class="text-theme text-[18px] font-bold">编辑公司主营业务</span>
            </div>
            <section class="bg-[#F5F7FA] rounded-sm box-border p-4 mt-3 2xl:w-[750px]">
                <p class="text-sm text-primary">填写公司主营业务有什么用？</p>
                <p class="text-sm text-secondary mt-2">添加主营业务，方便求职者快速了解公司；平台也将根据你所填写的业务，更好的为您推荐符合要求的牛人；公司未来将出现在相应业务榜单下，增加公司曝光度。</p>
            </section>
            <section class="mt-6 2xl:w-[750px]">
                <Form v-bind="defaultFormProps" 
                    layout="vertical"
                    :rules
                    :model="formState"
                    ref="formRef"
                >
                    <FormItem name="shortIntro">
                        <template #label>
                            <span class="font-medium text-base text-primary">
                                主营业务
                            </span>
                        </template>
                        <a-select
                            v-model:value="formState.mainCase"
                            mode="tags"
                            style="width: 100%; height: 36px;"
                            placeholder="添加主营业务"
                            :dropdown-style="{visibility: 'hidden'}"
                            class="fuck-select"
                        ></a-select>
                    </FormItem>
                    <FormItem style="margin-block-start: 48px;">
                        <a-button type="primary" class="w-[124px]" size="large" :loading="formLoading" @click="handleSubmit()">
                            保存
                        </a-button>
                    </FormItem>
                </Form>
            </section>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { postCompanyinfoBusinesses } from '@/api/siderBar/companyInfo';
import type { CompanyInfoResult } from '@/api/siderBar/model';
import { defaultFormProps } from '@/constants/comp-setting';
import { Form, FormItem, message } from 'ant-design-vue';

defineOptions({
    name: "CompanyMainCase"
})

type Props = Partial<CompanyInfoResult>
const props = defineProps<Props>()
const emit = defineEmits<{
    refresh: []
}>()

type FormState = {
    mainCase: string[]
};
const {
    formLoading,
    formRef,
    formState,
    rules,
    handleFormSubmit
} = useFormState<FormState>({
    getInitialState() {
        return {
            mainCase: []
        }
    },
    rules: {
        mainCase: { required: true, message: '请添加公司主营业务' }
    }
})
watch(() => props.businesses, () => {
    if (props.businesses) {
        populate()
    }
}, {
    immediate: true
})
function populate() {
    if (props.businesses) {
        formState.value.mainCase = props.businesses.map(({ name }) => name)
    }
}
async function handleSubmit() {
    await handleFormSubmit(({ mainCase }) => {
        return postCompanyinfoBusinesses(mainCase.map(l => ({ name: l })))
    })
    message.success('保存成功')
    emit("refresh")
}
</script>